import { Button } from "@/components/ui/btn/button1";
import { Input } from "@/components/ui/input/input1";
import { LabelInput } from "@/components/ui/input/label_input";
import { useEffect, useState } from "react";
import { toast } from "sonner";

export default function Template({ selectedType, setIndexUiError }: NavIndex) {
  const [prompt, setPrompt] = useState("");
  const [sourceBatch, setSourceBatch] = useState(() => {
    return localStorage.getItem("templateSouceBatch") || "";
  });
  const [buildBatch, setBuildBatch] = useState(() => {
    return localStorage.getItem("templateBuildBatch") || "";
  });
  const [isLoading, setIsLoading] = useState(false);
  const [hasLocalError, setHasLocalError] = useState({
    prompt: false,
    sourceBatch: false,
    buildBatch: false,
  });
  // ui 值改变时，保存到localStorage
  useEffect(() => {
    localStorage.setItem("templateSouceBatch", sourceBatch);
    localStorage.setItem("templateBuildBatch", buildBatch);
  }, [sourceBatch, buildBatch]);

  const simulate = () => {
    // 重置错误状态
    setIndexUiError(false);
    setHasLocalError({
      prompt: false,
      sourceBatch: false,
      buildBatch: false,
    });
    // 验证所有必填字段
    const indexErrors = {
      type: !selectedType,
    };
    const localErrors = {
      prompt: !prompt,
      sourceBatch: !sourceBatch,
      buildBatch: !buildBatch,
    };
    setIndexUiError(indexErrors.type);
    setHasLocalError(localErrors);
    if (
      indexErrors.type ||
      localErrors.prompt ||
      localErrors.sourceBatch ||
      localErrors.buildBatch
    ) {
      toast.error("请填写所有必填项", {
        position: "top-center",
      });
      return true;
    }

    return false;
  };
  return (
    <div className="flex h-full flex-grow flex-col">
      <div className="my-auto flex flex-row justify-center space-x-4">
        <div className="flex flex-row space-x-4 pb-6">
          <LabelInput
            className="w-48"
            label="来源批次"
            placeholder="请输入来源的批次"
            value={sourceBatch}
            errorFlag={hasLocalError.sourceBatch}
            onChange={(e) => {
              setSourceBatch(e.target.value);
            }}
          ></LabelInput>
          <LabelInput
            className="w-48"
            label="模板批次"
            value={buildBatch}
            onChange={(e) => {
              setBuildBatch(e.target.value);
            }}
            errorFlag={hasLocalError.buildBatch}
            placeholder="请输入提取的批次"
          ></LabelInput>
        </div>
        <div className="my-auto mb-6 flex flex-row space-x-4">
          <Input
            placeholder="模板提取提示词"
            className="w-96"
            value={prompt}
            onChange={(e) => {
              setPrompt(e.target.value);
            }}
            errorFlag={hasLocalError.prompt}
          />
          <Button
            onClick={() => {
              if (simulate()) return;
              setIsLoading(true);
              setTimeout(() => {
                setIsLoading(false);
                toast.success("模拟成功了！", { position: "top-center" });
              }, 1000);
            }}
            disabled={isLoading}
          >
            {isLoading ? "提取中..." : "开始提取"}
          </Button>
        </div>
      </div>

      <div className="relative flex h-full flex-grow">
        <iframe
          src={import.meta.env.VITE_TEMPLATE_URL}
          className="absolute inset-0 h-full w-full border-0"
        />
      </div>
    </div>
  );
}
